<template>
  <div class="shop-tree">
    <el-tabs type="border-card">
      <el-tab-pane :label="title">
        <div class="shop-name">
          <el-input
            placeholder="请输入店铺名称搜索"
            v-model="shopName"
            class="input-with-select"
            @input="getList"
            clearable
          ></el-input>
        </div>
        <el-scrollbar wrap-class="area-tree-scrollbar">
          <el-menu :default-active="activeIndex" @select="selectArea">
            <el-menu-item
              :key="index"
              :index="index.toString()"
              v-for="(item, index) of shopList"
            >
              {{ item.name }}
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: 'shop-screen',
  props: {
    value: '',
    title: {
      type: String,
      default: '所属店铺'
    }
  },
  data () {
    return {
      activeIndex: '0',
      shopName: '',
      shopList: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$POST('/sot-admin-api/merchant/sub/querySubMchAnalysisList', {
        pageNo: 1,
        pageSize: 20,
        status: 1,
        name: this.shopName
      }).then(res => {
        if (res.errorCode == '00000') {
          this.shopList = res.data.list
          this.shopList.unshift({
            id: '',
            name: '全部'
          })
          this.selectArea('0')
        }
      })
    },
    selectArea (n) {
      this.activeIndex = n
      this.$emit('input', this.shopList[n].subMchId)
    }
  }
}
</script>
<style lang="scss" scoped>
.shop-tree {
  padding: 20px 0 0 20px;
  width: 260px;
  .shop-name {
    padding-bottom: 10px;
  }
  :deep(.el-scrollbar) {
    height: calc(100vh - 246px) !important;
    .is-horizontal {
      display: none;
    }
    .el-menu {
      border-right: none;
      .el-menu-item {
        height: 40px;
        line-height: 40px;
        padding: 0 10px !important;
      }
      .el-menu-item.is-active {
        background-color: #e8f4ff;
      }
    }
  }
}
</style>
